<template>
  <div>
    <el-steps style="max-width: 600px;margin: 0 auto 10px;background:transparent;" :active="active" :space="200"
      align-center finish-status="success">
      <el-step title="基本信息" :icon="Document" />
      <el-step title="资料上传" :icon="UploadFilled" />
    </el-steps>
    <div class="step_content">
      <el-form v-show="active === 0" :model="form" :inline="true" ref="addform" label-position="left" :rules="rules"
        label-width="160px">
        <div class="step_title">基础信息</div>
        <el-form-item label="项目编码" prop="projectCode">
          <el-input v-model="form.projectCode" placeholder="请输入项目编码" clearable />
        </el-form-item>
        <el-form-item label="项目名称" prop="itemName">
          <el-input v-model="form.itemName" placeholder="请输入项目名称" clearable />
        </el-form-item>
        <el-form-item label="项目类型" prop="itemType">
          <el-radio-group v-model="form.itemType">
            <el-radio v-for="dict in item_type" :key="dict.value" :label="Number(dict.value)">{{ dict.label
              }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="项目时间" prop="dateRange">
          <el-date-picker v-model="form.dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="联系方式" prop="contactMethod">
          <el-input v-model="form.contactMethod" placeholder="请输入联系方式" clearable />
        </el-form-item>
        <el-form-item label="项目负责人" prop="projectManager">
          <el-input v-model="form.projectManager" placeholder="请输入项目负责人" clearable />
        </el-form-item>
        <el-form-item label="项目简介" prop="projectIntroduction" style="width:calc(100% - 32px);">
          <el-input v-model="form.projectIntroduction" placeholder="可考虑从计划整体概况、计划目的、计划资源保障等方面做简要说明" clearable
            type="textarea" maxlength="200" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }" />
        </el-form-item>
        <div v-if="form.projectType + '' !== '1'">
          <div class="step_title">预算信息</div>
          <el-form-item label="预算金额" prop="totalBudget">
            <el-input v-model="form.totalBudget" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
              placeholder="请输入预算金额" clearable>
              <template #append>万元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="采购描述" prop="purchaseDescription" style="width:calc(100% - 32px);">
            <el-input v-model="form.purchaseDescription" placeholder="可考虑从采购内容、资金来源等方面做简要说明" clearable type="textarea"
              maxlength="200" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }" />
          </el-form-item>
        </div>
        <div v-if="form.projectType + '' === '1'">
          <div class="step_title">采购信息</div>
          <el-form-item label="采购金额" prop="purchaseAmount">
            <el-input v-model="form.purchaseAmount" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
              placeholder="请输入采购金额" clearable>
              <template #append>万元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="采购描述" prop="purchaseDescription" style="width:calc(100% - 32px);">
            <el-input v-model="form.purchaseDescription" placeholder="可考虑从采购内容、资金来源等方面做简要说明" clearable type="textarea"
              maxlength="200" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }" />
          </el-form-item>
        </div>
        <div class="step_title">经济可行性</div>
        <el-form-item label="资源用途" prop="resourceUsage">
          <el-radio-group v-model="form.resourceUsage">
            <el-radio v-for="item in resource_usage" :key="item.value" :label="Number(item.value)">{{ item.label
              }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.resourceUsage + '' === '2'" label="预估市场容量" prop="marketCapacity">
          <el-input v-model="form.marketCapacity" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
            placeholder="请输入预估市场容量" clearable>
            <template #append>亿元</template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="form.resourceUsage + '' === '2'" label="客户群体" prop="customerObject">
          <el-input v-model="form.customerObject" placeholder="请输入客户群体" clearable />
        </el-form-item>
        <el-form-item v-if="form.resourceUsage + '' === '1'" label="用户群体" prop="customerObject">
          <el-input v-model="form.customerObject" placeholder="请输入用户群体" clearable />
        </el-form-item>
        <el-form-item label="经济可行性分析简介" prop="analysisIntroduction" style="width:calc(100% - 32px);">
          <el-input v-model="form.analysisIntroduction" placeholder="可考虑从目标市场、产品价值和安全风险等方面做简要说明" clearable
            type="textarea" maxlength="200" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }" />
        </el-form-item>
        <el-form-item label="收益分析简介" prop="earningsNtroduction" style="width:calc(100% - 32px);">
          <el-input v-model="form.earningsNtroduction" placeholder="主要是对预期收益（或价值）的说明（如销售额、利润、投资回报率等）" clearable
            type="textarea" maxlength="200" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }" />
        </el-form-item>
      </el-form>
      <div v-if="active === 1">
        <div class="step_title">资料上传</div>
        <el-alert show-icon :title="tips[Number(form.projectType) - 1]" type="warning" :closable="false"
          style="margin-bottom: 10px;" />
        <FileUpload :isShowTip="false" :needDetail="true" :fileType="[]" v-model="form.fileArray" :drag="true">
          <template #content>
            <el-icon class="el-icon--upload">
              <upload-filled />
            </el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </template>
        </FileUpload>
      </div>
    </div>
    <div class="step_footer">
      <el-button @click="cancle">取消</el-button>
      <el-button v-if="active !== 0" @click="pre">上一步</el-button>
      <el-button v-if="active !== 1" type="primary" @click="next">下一步</el-button>
      <el-button v-if="active === 1" type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>
<script setup name="Add">
import {
  addProject,
  editProject,
  getProjectInfo
} from '@/api/pm/index'
import { UploadFilled, Document } from '@element-plus/icons-vue'
import { onMounted } from 'vue';
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const { project_status, project_type, project_results, item_type, resource_usage } = proxy.useDict(
  "project_status",
  "project_type",
  "project_results",
  "item_type",
  "resource_usage"
);
const tips = [
  '请上传所需资料包括但不限于采购计划书、采购审批单、经济可行性分析报告、组织架构说明书',
  '请上传所需资料包括但不限于立项报告、立项审批单、经济可行性分析报告、项目预算报告、组织架构说明书',
  '请上传所需资料包括但不限于立项报告、立项审批单、经济可行性分析报告、项目预算报告、组织架构说明书'
]
const addform = ref()
const uploadList = ref([]);
const active = ref(0)
const fileUrl = ref('')
const validNum = (rule, value, callback) => {
  if (value <= 0) {
    callback(new Error("请输入金额"));
  } else {
    callback()
  }
}
const data = reactive({
  form: {
    projectType: '',
    itemName: '',
    projectCode: '',
    itemType: '',
    dateRange: [],
    startTime: '',
    endTime: '',
    contactMethod: '',
    projectManager: '',
    projectIntroduction: '',
    totalBudget: '',
    purchaseDescription: '',
    purchaseAmount: '',
    resourceUsage: '',
    marketCapacity: '',
    customerObject: '',
    analysisIntroduction: '',
    earningsNtroduction: '',
    fileArray: [],
    itemId: ''
  },
  rules: {
    projectCode: [{ required: true, message: "请输入项目编码", trigger: "blur" }],
    itemName: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
    itemType: [{ required: true, message: "请选择项目类型", trigger: "change" }],
    dateRange: [{ required: true, message: "请输入项目时间", trigger: "change" }],
    // contactMethod: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
    // projectManager: [{ required: true, message: "请输入项目负责人", trigger: "blur" }],
    projectIntroduction: [{ required: true, message: "请输入项目简介", trigger: "blur" }],
    purchaseAmount: [
      { required: true, message: "请输入采购金额", trigger: "blur" },
      { required: true, validator: validNum, trigger: "blur" }
    ],
    totalBudget: [
      { required: true, message: "请输入预算金额", trigger: "blur" },
      { required: true, validator: validNum, trigger: "blur" }
    ],
    purchaseDescription: [{ required: true, message: "请输入采购描述", trigger: "blur" }],
    resourceUsage: [{ required: true, message: "请输入资源用途", trigger: "change" }],
    customerObject: [{ required: true, message: "请输入用户群体", trigger: "blur" }],
    analysisIntroduction: [{ required: true, message: "请输入经济可行性分析简介", trigger: "blur" }],
    earningsNtroduction: [{ required: true, message: "请输入收益分析简介", trigger: "blur" }],
    // fileArray: [{ required: true, message: "请选择文件", trigger: "change" }],
  }
});

const { form, rules } = toRefs(data);
const pre = () => {
  active.value--
}
const next = () => {
  // active.value++
  if (active.value === 0) {
    proxy.$refs["addform"].validate(valid => {
      if (valid) {
        active.value++
      }
    })
  }
}
const submit = () => {
  if (form.value.fileArray.length === 0) return proxy.$modal.msgWarning('请上传文件');
  form.value.startTime = form.value.dateRange[0]
  form.value.endTime = form.value.dateRange[1]
  form.value.purchaseAmount = Number(form.value.purchaseAmount)
  form.value.totalBudget = Number(form.value.totalBudget)
  console.log(form, 'form')
  if (route.query.type === 'add') {
    addProject(form.value).then(res => {
      proxy.$modal.msgSuccess('新增成功！')
      cancle()
    })
  } else {
    editProject(form.value, type).then(res => {
      proxy.$modal.msgSuccess('修改成功！')
      cancle()
    })
  }

}
const cancle = () => {
  router.go(-1)
}
//文件上传
onMounted(() => {
  if (route.query.id) {
    getProjectInfo(route.query.id).then(res => {
      form.value.itemId = route.query.id
      form.value = Object.assign({}, res.data)
      form.value.dateRange = [form.value.startTime, form.value.endTime]
      console.log(form.value, 'edit')
    })
  }
  form.value.projectType = route.query.type
})
</script>

<style lang="scss" scoped>
.step_content {
  height: calc(100vh - 205px);
  overflow: auto;
  padding: 20px 60px;
}

.step_title {
  line-height: 20px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 10px;
  margin: 20px 0 20px;

  &::before {
    position: absolute;
    left: 0;
    height: 20px;
    width: 4px;
    background-color: #3970e3;
    content: "";
  }
}

.step_upload {
  margin-top: 10px;
}

.step_footer {
  margin-top: 10px;
  text-align: center;
}

:deep(.el-form--inline .el-form-item) {
  width: calc(50% - 32px);
}
</style>